<template>
	<view class="page">
		<!-- 自定义搜索框 -->
		<view class="search-bar">
			<view class="search-box">
				<text class="iconfont icon-search"></text>
				<input 
					type="text" 
					v-model="searchObject.name" 
					placeholder="搜索商品" 
					placeholder-class="placeholder"
					@confirm="search"
				/>
			</view>
		</view>

		<view class="cart-list">
			<uni-swipe-action>
				<uni-swipe-action-item v-for="item in model" :key="item.id" 
					:right-options="swipeOptions" @click="removeItem(item)">
					<view class="cart-item">
						<checkbox :checked="item.selected" @tap="toggleSelect(item)" class="checkbox"></checkbox>
						<image class="item-image" :src="item.image" mode="aspectFill"></image>
						<view class="item-info">
							<text class="item-name">{{item.name}}</text>
							<text class="item-sku">{{item.sku}}</text>
							<view class="price-quantity">
								<text class="item-price">¥{{item.price.toFixed(2)}}</text>
								<view class="quantity-control">
									<text class="qty-btn" @click="decreaseQuantity(item)" :class="{'disabled': item.quantity <= 1}">-</text>
									<input type="number" v-model="item.quantity" class="qty-input" />
									<text class="qty-btn" @click="increaseQuantity(item)">+</text>
								</view>
							</view>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>

		<view class="cart-footer">
			<view class="footer-left">
				<checkbox @tap="toggleSelectAll" :checked="isAllSelected" class="checkbox"></checkbox>
				<text>全选</text>
			</view>
			<view class="footer-right">
				<view class="price-info">
					<text>合计：</text>
					<text class="total-price">¥{{totalPrice.toFixed(2)}}</text>
				</view>
				<button class="checkout-btn" @click="checkout">结算({{selectedCount}})</button>
			</view>
		</view>

		<uni-load-more :status="status"></uni-load-more>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	import request from "/common/api.js"

	// 测试数据
	const model = ref([
		{
			id: 1,
			name: 'iPhone 15 Pro Max',
			sku: '256GB 原色钛金属',
			price: 9999.00,
			quantity: 1,
			selected: true,
			image: 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'
		},
		{
			id: 2,
			name: 'Apple Watch Series 9',
			sku: '45mm 星光色 GPS版',
			price: 3499.00,
			quantity: 1,
			selected: true,
			image: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'
		},
		{
			id: 3,
			name: 'AirPods Pro 2代',
			sku: 'USB-C充电盒',
			price: 1899.00,
			quantity: 2,
			selected: true,
			image: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'
		},
		{
			id: 4,
			name: 'MacBook Pro 14',
			sku: 'M3 Pro 18G 1TB',
			price: 18999.00,
			quantity: 1,
			selected: false,
			image: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg'
		}
	])

	const status = ref("more")
	const totalPage = ref(0)
	const searchObject = ref({
		name: "",
		no: 1,
		size: 10
	})

	const totalPrice = computed(() => {
		return model.value
			.filter(item => item.selected)
			.reduce((sum, item) => sum + (item.price * item.quantity), 0)
	})

	const serverUrl ="/appRole/search";

	// 增加数量
	const increaseQuantity = (item) => {
		item.quantity++
	}

	// 减少数量
	const decreaseQuantity = (item) => {
		if (item.quantity > 1) {
			item.quantity--
		}
	}

	// 删除商品
	const removeItem = (item) => {
		const index = model.value.findIndex(i => i.id === item.id)
		if (index > -1) {
			model.value.splice(index, 1)
		}
	}

	// 结算
	const checkout = () => {
		// 获取选中的商品
		const selectedItems = model.value.filter(item => item.selected)
		
		if (selectedItems.length === 0) {
			uni.showToast({
				title: '请选择商品',
				icon: 'none'
			})
			return
		}

		// 将选中的商品信息存储到本地
		uni.setStorageSync('checkoutItems', JSON.stringify(selectedItems))
		
		// 跳转到确认订单页面
		uni.navigateTo({
			url: '/pages/cart/confirm'
		})
	}

	// 滑动操作配置
	const swipeOptions = [{
		text: '删除',
		style: {
			backgroundColor: '#ff3a32'
		}
	}]

	// 计算属性
	const isAllSelected = computed(() => {
		return model.value.length > 0 && model.value.every(item => item.selected)
	})

	const selectedCount = computed(() => {
		return model.value.filter(item => item.selected).length
	})

	// 方法
	const toggleSelect = (item) => {
		item.selected = !item.selected
	}

	const toggleSelectAll = () => {
		const newState = !isAllSelected.value
		model.value.forEach(item => item.selected = newState)
	}

	// 搜索方法
	const search = () => {
		// 实现搜索逻辑
		console.log('搜索:', searchObject.value.name)
	}
</script>

<style>
	/* 搜索框样式 */
	.search-bar {
		padding: 20rpx;
		background: #ffffff;
		position: sticky;
		top: 0;
		z-index: 100;
	}

	.search-box {
		display: flex;
		align-items: center;
		height: 72rpx;
		background: #f7f7f7;
		border-radius: 36rpx;
		padding: 0 30rpx;
	}

	.icon-search {
		font-size: 32rpx;
		color: #666;
		margin-right: 10rpx;
	}

	.search-box input {
		flex: 1;
		height: 100%;
		font-size: 28rpx;
		color: #333;
	}

	.placeholder {
		color: #999;
		font-size: 28rpx;
	}

	/* 页面基础样式 */
	.page {
		background-color: #f7f7f7;
		min-height: 100vh;
		padding-bottom: 90rpx; /* 调整底部内边距，与底部栏高度对应 */
	}

	/* 底部结算栏样式 */
	.cart-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 90rpx; /* 增加高度 */
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
	}

	.checkout-btn {
		background-color: #ff3a32;
		color: #fff;
		font-size: 28rpx;
		padding: 0 40rpx;
		height: 70rpx; /* 增加按钮高度 */
		line-height: 70rpx;
		border-radius: 35rpx;
		margin: 0;
	}

	/* 其他样式保持不变 */
	.cart-list {
		padding: 20rpx;
	}

	.cart-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		border-radius: 12rpx;
	}

	.checkbox {
		margin-right: 20rpx;
		transform: scale(0.8);
	}

	.item-image {
		width: 180rpx;
		height: 180rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	.item-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.item-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.item-sku {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 20rpx;
	}

	.price-quantity {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.item-price {
		color: #ff3a32;
		font-size: 32rpx;
		font-weight: bold;
	}

	.quantity-control {
		display: flex;
		align-items: center;
		border: 1rpx solid #eee;
		border-radius: 4rpx;
	}

	.qty-btn {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 28rpx;
		color: #333;
		background-color: #f7f7f7;
	}

	.qty-btn.disabled {
		color: #ccc;
	}

	.qty-input {
		width: 80rpx;
		height: 60rpx;
		text-align: center;
		font-size: 28rpx;
		border-left: 1rpx solid #eee;
		border-right: 1rpx solid #eee;
	}

	.footer-left {
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}

	.footer-right {
		display: flex;
		align-items: center;
	}

	.price-info {
		margin-right: 20rpx;
		font-size: 28rpx;
	}

	.total-price {
		color: #ff3a32;
		font-size: 32rpx;
		font-weight: bold;
	}

	.uni-swipe-action__btn {
		padding: 0 32rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}
</style>
